<style lang="scss" scoped>

    $green:#1fc6a0;

    $error-color:red;

    .textarea-container{
        width:100%;
        height:auto;
        clear: both;
        margin-top: 10px;
    }

    .textarea-lbl{
      line-height: 45px;
      font-size: 18px;
      font-family: '微软雅黑';
      height: 45px;
      display: inline-block;
      width:100%;
      display: block;
      clear: both;
      color: #777;
    }

    .input{
      min-height: 100px;
      padding: 5px;
      resize: none;
      width:100%;
      outline: none;
      font-size: 16px;
      border-radius: 5px;
      color: #333;
      border:1px solid #777;
      &:focus{
        border-color:$green;
        box-shadow: 0px 0px 3px $green inset;
      }
    }

    .error-input{
      border-color:red;
      box-shadow: 0px 0px 3px  $error-color inset;
    }

    .error-message{
      font-family: '微软雅黑';
      display: block;
      clear: both;
      float: left;
      width:100%;
      height: 25px;
      line-height: 25px;
      font-size: 14px;
      color: $error-color;
    }

    .required-flag{
      color: $error-color;
    }

</style>
<template>
  <div class="textarea-container">
      <div class="textarea-lbl">
        <span class="required-flag" v-if="required">*</span>
        {{labelText}}
      </div>
      <textarea class="input" :class="{'error-input':!validState}" ref="textarea" :disabled="disabled"  :placeholder="placeholder" v-bind:value="value"
                v-on:input="change($event.target.value)" @focus="focusValid" @blur="valid" >

      </textarea>
      <span class="error-message" v-if="!validState&&required&&inited">{{errorMessage}}</span>
  </div>
</template>
<script>
  export default{
      name:"TextArea",
      props: {
        value: {
          type: String,
          required: true
        },
        labelText:{
          type:String,
          required:true,
          default:'暂无'
        },
        placeholder:{
          type:String,
          required:false
        },
        required:{
          type:Boolean,
          required:false,
          default:true
        },
        errorMessage:{
          type:String,
          required:false,
          default:'请填写'
        },
        disabled:{
          type:Boolean,
          default:false
        },
      },
      data(){
        return {
          validState:true,
          inited:false,
        }
      },
      methods:{
        change(val){
          this.$emit('input',val);
        },
        focusValid(){
          //如果是非必填项
          if (!this.required){
            return;
          }

          if(!this.inited){
            this.inited=true;
            return;
          }

          this.validState=true;
        },
        valid(){

          //如果是非必填项
          if (!this.required){
            return;
          }

          if (this.trim(this.value)===""&&this.inited==true){

            this.validState=false;

          }
          else{

            this.validState=true;

          }

        }
      }
  }
</script>
